<!-- Created by jack on 2022/4/15 - 17:17 -->
<style scoped lang="less">
.search{
  box-sizing: border-box;
  border: none;
  background: #efefef;
  outline: none;
  border-radius: 20px;
  height: 20px;
  padding: 0 20px;
  width: 150px;
  font-size: 12px;
  color: #787878;
  &::placeholder{
    color: #b4b4b4;
  }
}
.search-box{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  &-icon{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    padding-left: 4px;
  }
  &-clear{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    margin-right: 4px;
    transition: all ease-in-out 300ms;
    border-radius: 50%;
    &:hover{
      background: #e7e7e7;
    }
    &:active{
      background: #a8a8a8;
    }
  }
}
</style>

<template>
  <div class="search-box" @mousedown.stop="() => {}" >
    <img class="search-box-icon" src="../icon/search.png"/>
    <input class="search" :value="props.modelValue" @input="emit('update:modelValue',$event.target.value)" :placeholder="placeholder"/>
    <img class="search-box-clear" src="../icon/close.png" @click="clear" v-if="modelValue"/>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  modelValue:{ type:[String,Number], default:"" },
  placeholder:{ type:String, default:"搜索" },
})
const emit = defineEmits(['update:modelValue','clear'])

const clear = () => {
  emit('update:modelValue','')
  emit('clear')
}
</script>
